<template>
  <div id="add_near">
    <c-title :hide="false" text="添加推荐商品"></c-title>
    <div class="content">
      <div class="top-search" @click="toSearch">
        <div class="search" >
          <i class="iconfont icon-sousuo1" ></i>
          <form @submit.prevent action="#" id="search-form">
            <input placeholder="请输入搜索关键词" type="search" v-model="keyword"></input>
          </form>
        </div>
      </div>
      <div class="detail-box">
        <div style="overflow: hidden; height: 80vh;" ref="sortWrapper">
          <div class="left-row">
            <div :class="item.actived ? 'active-status sort-first' : 'sort-first'" v-for="(item,index) in option1" :key="index"  @click="changeCategory(item.value,index)">
              <span class="line" v-if="item.actived"></span>
              <span class="sort-name">{{item.text}}</span>
            </div>
          </div>
        </div>
        <div class="right-row">
          <div class="top-box">
              <van-collapse v-model="activeNames" accordion style="width: 96%;" :border="false">
                <van-collapse-item name="1">
                  <template #title>
                    <div class="second-box" v-if="!activeNames">
                      <span :class="item.actived ? 'active-color second-name' : 'second-name'" v-for="(item,index) in option2" :key="index" @click.stop="changeSecond(item.value,index)">{{item.text}}</span>
                    </div>
                    <div v-if="activeNames" style="padding: 0.35rem 0.55rem;">选择分类</div>
                  </template>
                  <div class="second-box" v-if="activeNames">
                    <span :class="item.actived ? 'active-color second-name' : 'second-name'" v-for="(item,index) in option2" :key="index" @click.stop="changeSecond(item.value,index)">{{item.text}}</span>
                  </div>
                </van-collapse-item>
              </van-collapse>
          </div>
          <div class="coverLayer" v-if="this.activeNames == '1'" ></div>
          <div ref="goodsWrapper" style="overflow: hidden; height: 80vh;">
            <div class="bottom-content scroll-content" >
              <div class="goods-box" v-for="(item,index) in datas" :key="index">
                <img :src="item.change_thumb" alt="">
                <div class="goods-detail">
                  <div class="goods-name">{{item.title}}</div>
                  <div class="bot-price">
                    <span class="price-name"><span class="icon-sty">{{$i18n.t('money') }}</span>{{item.price}}</span>
                    <span class="add-icon" v-if="!item.isAdd" @click="clickAdd(index)"><van-icon name="plus" /></span>
                    <span class="del-icon" v-if="item.isAdd" @click="clickDel(index,item.id)"><van-icon name="minus" /></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fixed " :class="[fun.getPhoneEnv() == 3 ? 'pc' : '']">
      <div class="fixed-top">
        <div class="cho-goods" @click="showPopup = true">
          <span class="icon-box">
            <i class="iconfont icon-gouwuche_"></i>
          </span>
          <span class="cho-num">{{result.length}}</span>
        </div>
        <div>商品展示数量:<span> {{show_num}}</span></div>
      </div>
      <div class="btn" @click="add">
        确定
      </div>
    </div>
    <van-popup v-model="showPopup" position="bottom" :style="{ 'max-height': '40%' }">
      <div class="popup-box">
        <div class="popup-top">
          <span class="popup-top-left">已选{{result.length}}件</span>
          <span class="popup-clear" @click="clearChooseGoods"><i class="iconfont icon-fontclass-shanchu"></i> 清空</span>
        </div>
        <div class="bottom-content" style="padding: 2.3rem 0 0 0;">
          <div class="goods-box" v-for="(item,index) in chooseGoods" :key="index" style="margin: 0 0 0.8rem 0;">
            <img :src="item.change_thumb" alt="" class="popup-img">
            <div class="goods-detail">
              <div class="popup-name goods-name">{{item.title}}</div>
              <div class="bot-price">
                <span class="price-name"><span class="icon-sty">{{$i18n.t('money') }}</span>{{item.price}}</span>
                <span class="del-icon" @click="delChooseGoods(index,item.id)"><van-icon name="minus" /></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import add_near_controller from "./add_near_controller";

export default add_near_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>

::v-deep .van-cell {
  padding: 0;
}

::v-deep .van-cell__title, .van-cell__value {
  overflow: hidden;
}

::v-deep .van-cell__right-icon {
  margin-left: 9px;
  line-height: 35px;
}

::v-deep .van-collapse-item__content {
  padding: 12px 0;
}

::v-deep  .van-cell--clickable:active {
  background-color: white;
}
#add_near {
  // background-color: #fff;
  height: 100vh;
  background: #FAFAFA;

  .content {
    height: 80%;
    // padding-bottom: 5.125rem;

    // .list {
    //   border-radius: 0.4rem;
    //   margin: 0.8rem;
    //   padding: 0 0.8rem;
    //   background: white;

    //   .item:last-child {
    //     border-bottom: none;
    //   }

    //   .item {
    //     display: flex;
    //     background-color: #fff;
    //     padding: 0.8rem 0;
    //     border-bottom: 0.1rem solid #E7E7E7;

    //     .img {
    //       display: flex;
    //       width: 4.8rem;
    //       height: 4.8rem;
    //       border-radius: 0.3125rem;
    //       box-sizing: border-box;
    //       margin-left: 0.75rem;

    //       img {
    //         width: 100%;
    //         height: 100%;
    //         border-radius: 0.2rem;
    //       }
    //     }

    //     .info {
    //       display: flex;
    //       flex-direction: column;
    //       justify-content: space-between;
    //       text-align: center;
    //       margin-left: 0.5rem;
    //       flex: 1;

    //       .title {
    //         color: #000;
    //         text-align: left;
    //         overflow: hidden;
    //         text-overflow: ellipsis;
    //         display: -webkit-box;
    //         -webkit-line-clamp: 2;
    //         -webkit-box-orient: vertical;
    //         font-size: 0.8rem;
    //         color: #00001C;
    //       }

    //       .bottom {
    //         display: flex;
    //         justify-content: space-between;

    //         .money {
    //           font-size: 0.9rem;
    //           color: #F15353;
    //           .money-tag {
    //             font-size: 0.6rem;
    //             margin-right: 0.1rem;
    //           }
    //         }
    //       }
    //     }
    //   }
    // }

    .top-search {
      background: white;
      padding: 0.6rem 0.8rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .search {
        width: 100%;
        height: 1.95rem;
        background-color: #f2f2f2;
        display: flex;
        align-items: center;
        color: #999999;
        border-radius: 1.3rem;
        form {
          width: 90%;
          height: 100%;
        }
        input {
          outline: none;
          border: none;
          text-indent: 1rem;
          width: 100%;
          height: 100%;
          font-size: 0.8rem;
        }

        .icon-sousuo1 {
          position: relative;
          left: 0.7rem;
        }
      }

    }

    .detail-box {
      display: flex;
      height: 100%;
      .left-row {
        width: 4.8rem;
        background: #FAFAFA;
        // height: 100vh;
        // padding-bottom: 3.2rem;
        // overflow: scroll;
        padding-bottom: 0.5rem;
        .active-status {
          background: white;
          color: #F15353 !important;
        }
        .sort-first {
          padding: 0.85rem 0.3rem;
          position: relative;
          color: #3B3B4A;
          .line {
            width: 0.15rem;
            height: 1rem;
            background: #F15353;
            border-radius: 0.75rem;
            display: block;
            position: absolute;
            top: 1rem;
            left: 0;
          }
          .sort-name {
            font-size: 0.8rem;
            font-weight: 400;
            word-wrap: break-word;
          }
        }
      }
      .right-row {
        background: white;
        width: calc(100% - 4.8rem);
        // padding-bottom: 7.2rem;
        .top-box {
          padding: 0.4rem 0 1.2rem 0.8rem;
          display: flex;
          align-items: center;
          // justify-content: space-between;
          .second-box {
            overflow-y: scroll;
            // width: 71%;
            display: flex;
            .active-color {
              color: #F15353;
              background: rgba(241,83,83,0.39);
            }
            .second-name {
              background: #F8F8FB;
              padding: 0.35rem 0.55rem;
              border-radius: 0.4rem;
              margin-right: 0.4rem;
              white-space: nowrap;
            }
          }
          .icon-box {

          }
        }
        .coverLayer {
          //遮盖层
          width: calc(100% - 4.8rem);
          height: 80%;
          background-color: rgba(0, 0, 0, 0.5);
          position: absolute;
          // top: 30%;
          z-index: 99;
        }
        

      }
    }

    // .van-dropdown-menu {
    //   margin-top: 1rem;
    //   padding: 0 2.7rem;
    // }

    // .van-dropdown-menu__item {
    //   font-size: 0.35rem;
    // }

    // .van-hairline--top-bottom {
    //   position: static;
    // }
  }
  .bottom-content {
    // height: 100%;
    // overflow: hidden;
    padding: 0 0 5rem 0.8rem;
    background: white;
    .goods-box {
      display: flex;
      margin-bottom: 0.8rem;
      img {
        width: 5rem;
        height: 5rem;
        border-radius: 0.4rem;
        margin: 0;
      }
      .popup-img {
        width: 4rem;
        height: 4rem;
      }
      .goods-detail {
        text-align: left;
        margin: 0 0.6rem 0 0.4rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: calc(100% - 5rem);
        .popup-name {
          font-size: 0.8rem !important;
        }
        .goods-name {
          font-size: 0.9rem;
          font-weight: 600;
          color: #3B3B4A;
          display: -webkit-box;     
          -webkit-line-clamp: 2;     
          -webkit-box-orient: vertical; 
          overflow: hidden;           
          text-overflow: ellipsis;   
        }
        .bot-price {
          display: flex;
          align-items: center;
              justify-content: space-between;
          .price-name {
            font-size: 0.9rem;
            font-weight: 600;
            color: #F15353;
            .icon-sty{
              zoom: 0.7;
            }
          }
          .add-icon {
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #F15353;
            color: white;
          }
          .del-icon {
            width: 1.5rem;
            height: 1.5rem;
            border: 0.025rem solid #F15353;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #F15353;
            background: white;
          }
        }
      }
    }
    .tip-text {
      height: 5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #686868;
    }
  }
  .fixed {
    position: fixed;
    bottom: 0;
    height: 3.2rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
    padding: 0 1rem;
    box-shadow:
      0 0 0.125rem 0
      rgba(0, 0, 0, 0.1);
    background-color: #fff;
    
    .fixed-top {
      display: flex;
      align-items: center;
    }

    .cho-goods {
      display: flex;
      align-items: center;
      position: relative;
      margin-right: 0.8rem;
      .icon-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.2rem;
        height: 2.2rem;
        background: linear-gradient(329deg, #FF1313 0%, #FB7676 100%);
        border-radius: 50%;
        .icon-gouwuche_ {
          color: #FFFFFF;
          zoom: 1.4;
        }
      }
      .cho-num {
        display: flex;
        width: 1.1rem;
        height: 1.1rem;
        background: #FCA624;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        color: white;
        position: absolute;
        right: -0.5rem;
        top: -0.2rem;
      }
    }

    .btn {
      width: 4.8rem;
      color: #fff;
      font-size: 0.85rem;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 2.3rem;
      background-color: #F15353;
      border-radius: 1.25rem;
    }
  }
  
  .popup-box {
    padding: 0 0.6rem 0.75rem 0.6rem;
    .popup-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: fixed;
      width: 94%;
      padding: 0.5rem 0;
      background: white;
      z-index: 10;
      .popup-top-left {
        font-size: 0.9rem;
        font-weight: bold;
        color: #3B3B4A;
      }
      .popup-clear {
        font-size: 0.7rem;
        font-weight: 400;
        color: #AAAAB3;
        display: flex;
        align-items: center;
        .icon-fontclass-shanchu {}
      }
    }
  }
}

.pc {
  width: 375px !important;
}
</style>
